<template>
  <div>
    <div>
      <div style="display: flex; justify-content: space-between">
        <label for="">用户名：</label>
        <input type="text" placeholder="请输入用户名" v-model="account.Name" />
      </div>
      <div style="display: flex; justify-content: space-between">
        <label for="">密码：</label>
        <input
          type="text"
          placeholder="请输入密码"
          v-model="account.PassWord"
        />
      </div>
    </div>
    <button class="accountLogin-LoginButton-CSS" @click="accountLogin">
      登录
    </button>
  </div>
</template>

<script>
import { PostaccountLogin } from "./accountLogin.js";
//import messageTips from '../messageTipsCOMPO/messageTips.js'
export default {
  name: "accountLogin",
  data: function () {
    return {
      account: {
        Name: "",
        PassWord: "",
      },
    };
  },
  methods: {
    accountLogin() {
      var that = this;
      PostaccountLogin({
        accountName: this.account.Name,
        accountPassWord: this.account.PassWord,
      }).then((res) => {
        console.log(res);
        if (res.isSuccess === true) {
          this.$message({ text: "登陆成功即将跳转至主页", type: "success" });
          this.$cookies.set("token", res.token, res.duration + "s"); //设置cookies对象 res.duration秒后过期});
          setTimeout(function () {
            console.log('5秒已过');
            that.$router.push({ path: "/home" });
          }, 500);
        }
      });
    },
  },
  mounted() {},
  setup() {},
};
</script>

<style scoped>
.accountLogin-LoginButton-CSS {
  margin-top: 20px;
  width: 200px;
  padding: 8px;
  background-color: #428bca;
  border-color: #357ebd;
  color: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; /* future proofing */
  -khtml-border-radius: 5px; /* for old Konqueror browsers */
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  font-weight: 900;
  font-size: 125%;
  cursor: pointer;
}
</style>